<template>
<div class="config-list">
    <!-- <div>任务添加</div> -->
  <template v-if="taskList.length !== 0">
    <div class="item between" v-for="(item,index) in taskList" :key="index+Math.random()*100000">
      <span class="left expand center">
          <img :src="require(`@/assets/${item.emitEvent===0?'':'no'}light.png`)" width="15px">
          {{itemValFormat(item)}}
      </span>
      <span class="center">
        <span type="text" @click.stop="editConfig(item,index)" class="small-font" style="margin-right:.5rem;"><font color="#3B19B5">编辑</font></span>
        <span type="text" @click.stop="delConfig(item,index)" class="small-font"><font color="red">删除</font></span>
      </span>
    </div>
  </template>
</div>
</template>


<script>
export default {
  props:{
    taskList:{
      type:Array,
      default:()=>{
        return []
      }
    },
    index:{
      type:Number,
      required:true
    }
  },
  data(){
      return {
        emitEventDict:[
            {value: 0,label: 'LED控制'},
            {value: 1,label: '继电器控制'},
        ],
        emitEventModel:0,

        emitTypeDict:[
            {value: 1,label: '反转'},
            {value: 2,label: '关'},
            {value: 3,label: '开'},
            {value: 4,label: '延时反转'},
            {value: 5,label: '延时关'},
            {value: 6,label: '延时开'},
            {value: 7,label: '点动'}
        ],
        emitTypeModel:1,
        emitType2Dict:[
            {value: 0,label: '按键短按'},
            {value: 1,label: '按键长按'}
        ]
      }
  },
  mounted(){
    // console.log('getTaskList',this.taskList);
  },
  methods:{
      itemValFormat(item){
          const emitEventName = this.emitEventDict.filter(dict=>item.emitEvent === dict.value)[0].label;
          const emitTypeName = this.emitTypeDict.filter(dict=>item.values[1] === dict.value)[0].label;
          const emitType2Name = this.emitType2Dict.filter(dict=>item.values[0] === dict.value)[0].label;
          let s = '/'+item.values[3]/10 + '秒';
          if(![4,5,6].includes(item.values[1])){
            s = ""
          }
          return `${emitEventName.replace('控制','')}/${item.labels}/${emitType2Name.replace('按键','')}/${emitTypeName}${s}`;
      },
      editConfig(item,eventIndex){
        const { index } = this;
        console.log({item,index,eventIndex});
        this.$emit('editConfig',{item,index,eventIndex});
      },
      delConfig(item,eventIndex){
        const { index } = this;
        this.$emit('delConfig',{item,index,eventIndex});
      }
  }
}
</script>

<style lang="scss" scoped>
.small-font{
    cursor: pointer;
}
.item{
    margin:.5rem 0;
    .left{
        padding-left:.5rem;
        color:#FF875F;
        background:rgb(255,243,239);
        border-radius:13px;
        margin-right:1rem;
        height:26px;
    }
}
</style>